<template>
  <div>
    <Row type="flex"
         align="middle"
         justify="center">
      <ButtonGroup class="imooc-btn-group"
                   :class="{'editing': isEdit}">
        <Button size="small"
                :disabled="isEdit">
          <Dropdown @on-click="addMenu">
            <a href="javascript:void(0)">
              <Icon type="md-add"></Icon>
              <span class="imooc-dropdown">新增</span>
             <Icon type="arrow-down-b"></Icon>
            </a>
            <DropdownMenu slot="list">
              <DropdownItem name="bro">兄弟节点</DropdownItem>
              <DropdownItem name="child"
                            :disabled="menuData.length === 0">子节点</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </Button>
        <Button size="small"
                icon="ios-create"
                type="primary"
                :disabled="isEdit"
                @click="editMenu()">修改</Button>
        <Button size="small"
                icon="md-trash"
                type="error"
                :disabled="isEdit"
                @click="deleteMenu()">删除</Button>
      </ButtonGroup>
    </Row>
    <Tree ref="tree"
          :data="menuData"
          @on-select-change="handleTreeChange"></Tree>
  </div>
</template>

<script>
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    menuData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      selectNode: []
    }
  },
  /* computed: {
    menuData () {
      return this.menu
    }
  }, */
  methods: {
    addMenu (type) {
      if (this.selectNode.length > 0 || this.menuData.length === 0) {
        this.$emit('addMenuEvent', type)
      } else {
        this.$Message.error('请选择菜单节点后再添加！')
      }
    },
    editMenu () {
      if (this.selectNode.length > 0) {
        this.$emit('editMenuEvent', { ...this.selectNode[0] })
      } else {
        this.$Message.error('请选择菜单节点后再编辑！')
      }
    },
    handleTreeChange (item) {
      this.selectNode = item
      this.$emit('on-select', item)
    },
    deleteMenu () {
      if (this.selectNode.length > 0 || this.menuData.length === 0) {
        this.$Modal.confirm({
          title: '确定删除吗？',
          content: `删除${this.selectNode[0].title}的菜单项吗？`,
          onOk: () => {
            this.$emit('deleteMenuEvent', this.selectNode[0])
            this.selectNode = []
          }
        })
      } else {
        this.$Message.error('请选择菜单节点后再进行删除！')
      }
    }
  }
}
</script>

<style lang="less">
@media screen and (max-width: 1200px) {
  .imooc-btn-group {
    .ivu-icon {
      & + span {
        display: none;
      }
    }
    .imooc-dropdown {
      display: none;
    }
  }
}
.imooc-btn-group {
  .ivu-icon {
    & + span {
      margin-left: 0;
    }
  }
  &.editing {
    a {
      color: #dcdee2;
    }
    .ivu-btn-primary {
      border-color: #dcdee2 !important;
    }
    button:first-child {
      border-right: 0;
    }
  }
}
</style>
